<%@page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<head>
    <t:base type="jquery,easyui,tools,echarts,map.china"></t:base>
    <script type="text/javascript" src="plug-in/Highcharts-4.2.4/highcharts.js"></script>
    <script type="text/javascript" src="plug-in/tableexcel/tableExcel.js"></script>
    <style type="text/css">
        .tabs-header {
            background: white;
        }

        a {
            color: Blue;
            text-decoration: underline;
        }

    </style>
    <script type="text/javascript">
        $(function () {
            var flag = false;
            $("#tabs").tabs({
                onSelect: function (title) {
                    if (title == '院线服务状态' && !flag) {//只加载一次
                        dealStatusTableData();
                        // getStatusTableData();//默认根据默认年份加载
                        // initallEsHighChartsOfLine();
                        flag = true;
                    }
                }
            });

            //院线服务量
            var year1 = $("#year_1").val();
            dealEsTableData(year1);
            // getEsTableData(year1);
            // initallEsTableOfLine();
        });

        /**
         * year 年份
         * month 月份
         * exType 类型
         */
        function goViewPlan(year, month, exType) {
            var url = "cbsServiceController.do?getDetailCbsReport&year=" + year + "&month=" + month + "&exType=" + exType;
            addOneTab("服务单管理列表", url);
        }

        /**------------------------汇总-----------------------*/
        function getEsTableDataBeforeDeal(year, intheatername, bp) {
            var defer = $.Deferred();
            $.ajax({
                url: "cbsServiceController.do?getIpProblemReportData",
                data: {
                    "year": year,
                    "intheatername": intheatername,
                    "bp": bp
                },
                cache: false,
                // async: false,//必须是同步进行，为了获取 初始化 highcharts 数据    //将获取到的数据先放入defer对象，不需要必须同步，在下列使用链式写法时，在数据成功写入defer后会同步执行done中方法
                dataType: 'json',
                type: 'POST',
                success: function (data) {
                    defer.resolve(data);
                }
            });
            return defer.promise();
        }

        function dealEsTableData(year, intheatername, bp){
            lockmask(true,"处理中...","self");
            $.when(getEsTableDataBeforeDeal(year, intheatername, bp)).done(function(data){
                lockmask(false,undefined,"self");
                if(data.success){
                    clearLineCharData(); //每次初始化表格时清空临时储存的highchart数据

                    /*----------------表格-------------------*/
                    var obj = data.obj;
                    var zx = null;
                    if (obj.temperatureZx != null) {
                    	zx = (obj.temperatureZx)[0];
                    }
                    /*咨询*/
                    var sm = null;
                    if (obj.temperatureSm != null) {
                    	sm = (obj.temperatureSm)[0];
                    }
                    /*上门*/
                    var yc = null;
                    if (obj.temperatureYc != null) {
                       yc = (obj.temperatureYc)[0];
                    }
                    /*远程*/


                    var numInMonth1, monthArr1 = [];
                    var html = "";
                    html += "<tr><td>咨询业务</td>";
                    for (var i = 0; i < 12; i++) {
                    	if (zx !=null) { 
	                        numInMonth1 = typeof(zx[i+1]) != "undefined" ? zx[i+1] : 0;
	                        html += numInMonth1 != 0 ? '<td><span class="r1_' + i + '">' + numInMonth1 + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
	                        if (numInMonth1 == 0) {
	                            monthArr1.push("");
	                        } else {
	                            monthArr1.push(numInMonth1);
	                        }
                    	} else {
                    		html += '<td><span class="r1_' + i + '">0</span></td>';
                    		monthArr1.push("");
                    	}
                    }
                    setEsLineCharData("咨询业务", monthArr1);

                    var numInMonth2, monthArr2 = [];
                    html += "<tr><td>HD远程服务</td>";
                    for (var i = 0; i < 12; i++) {
                    	if (yc !=null) {
	                        numInMonth2 = typeof(yc[i+1]) != "undefined" ? yc[i+1] : 0;
	                        html += numInMonth2 != 0 ? '<td><span class="r1_' + i + '">' + numInMonth2 + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
	                        if (numInMonth2 == 0) {
	                            monthArr2.push("");
	                        } else {
	                            monthArr2.push(numInMonth2);
	                        }
                    	} else {
                    		html += '<td><span class="r1_' + i + '">0</span></td>';
                    		 monthArr2.push("");
                    	}
                    }
                    setEsLineCharData("HD远程服务", monthArr2);

                    var numInMonth, monthArr = [];
                    html += "<tr><td>服务商上门服务</td>";
                    for (var i = 0; i < 12; i++) {
                    	if (sm !=null) {
	                        numInMonth = typeof(sm[i+1]) != "undefined" ? sm[i+1] : 0;
	                        html += numInMonth != 0 ? '<td><span class="r1_' + i + '">' + numInMonth + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
	                        if (numInMonth == 0) {
	                            monthArr.push("");
	                        } else {
	                            monthArr.push(numInMonth);
	                        }
                    	} else {
                    		html += '<td><span class="r1_' + i + '">0</span></td>';
                    		 monthArr.push("");
                    	}
                    }
                    setEsLineCharData("服务商上门服务", monthArr);

                    $("#ttbody").html(html);
                    /*------------------end 表格------------------*/
                    initallEsTableOfLine();
                }else{
					tip(data.msg);
                }
            }).fail(function () {
                lockmask(false,undefined,"self");
                $.dialog.alert("获取数据失败！");
            })
        }

        // function getEsTableData(year, intheatername, bp) {
        //     $.ajax({
        //         url: "cbsServiceController.do?getIpProblemReportData",
        //         data: {
        //             "year": year,
        //             "intheatername": intheatername,
        //             "bp": bp
        //         },
        //         cache: false,
        //         async: false,//必须是同步进行，为了获取 初始化 highcharts 数据
        //         dataType: 'json',
        //         type: 'POST',
        //         success: function (data) {
        //             if (data.success) {
        //                 clearLineCharData(); //每次初始化表格时清空临时储存的highchart数据
        //
        //                 /*----------------表格-------------------*/
        //                 var obj = data.obj;
        //                 var zx = obj.temperatureZx;
        //                 /*咨询*/
        //                 var sm = obj.temperatureSm;
        //                 /*上门*/
        //                 var yc = obj.temperatureYc;
        //                 /*远程*/
        //
        //
        //                 var numInMonth1, monthArr1 = [];
        //                 var html = "";
        //                 html += "<tr><td>咨询业务</td>";
        //                 for (var i = 0; i < 12; i++) {
        //                     numInMonth1 = zx[i].total != 0 ? zx[i].total : 0;
        //                     html += numInMonth1 != 0 ? '<td><span class="r1_' + i + '">' + numInMonth1 + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
        //                     if (numInMonth1 == 0) {
        //                         monthArr1.push("");
        //                     } else {
        //                         monthArr1.push(numInMonth1);
        //                     }
        //                 }
        //                 setEsLineCharData("咨询业务", monthArr1);
        //
        //                 var numInMonth2, monthArr2 = [];
        //                 html += "<tr><td>HD远程服务</td>";
        //                 for (var i = 0; i < 12; i++) {
        //                     numInMonth2 = yc[i].total != 0 ? yc[i].total : 0;
        //                     html += numInMonth2 != 0 ? '<td><span class="r1_' + i + '">' + numInMonth2 + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
        //                     if (numInMonth2 == 0) {
        //                         monthArr2.push("");
        //                     } else {
        //                         monthArr2.push(numInMonth2);
        //                     }
        //                 }
        //                 setEsLineCharData("HD远程服务", monthArr2);
        //
        //                 var numInMonth, monthArr = [];
        //                 html += "<tr><td>服务商上门服务</td>";
        //                 for (var i = 0; i < 12; i++) {
        //                     numInMonth = sm[i].total != 0 ? sm[i].total : 0;
        //                     html += numInMonth != 0 ? '<td><span class="r1_' + i + '">' + numInMonth + '</span></td>' : '<td><span class="r1_' + i + '">0</span></td>';
        //                     if (numInMonth == 0) {
        //                         monthArr.push("");
        //                     } else {
        //                         monthArr.push(numInMonth);
        //                     }
        //                 }
        //                 setEsLineCharData("服务商上门服务", monthArr);
        //
        //                 $("#ttbody").html(html);
        //                 /*------------------end 表格------------------*/
        //             } else {
        //                 tip(data.msg);
        //             }
        //         }
        //     });
        // }

        function searchReport(tab) {
            var year = $("#year_" + tab).val();
            var departname = $("#departname_" + tab).val();
            var intheatername = $("#intheatername_" + tab).val();
            if (tab == 1) {
                dealEsTableData(year, intheatername, departname);

                // getEsTableData(year, intheatername, departname);
                // initallEsTableOfLine();
            } else if (tab == 2) {
                dealStatusTableData(intheatername, departname);
                // getStatusTableData(intheatername, departname);
                // initallEsHighChartsOfLine();
            }
        }

        var esLineData = [];

        function setEsLineCharData(name, data) {
            var dt = {};
            dt.name = name;
            dt.data = data;
            esLineData.push(dt);
        }

        function clearLineCharData() {
            esLineData = [];
        }

        function getEsLineCharData() {
            return esLineData;
        }

        /*柱状堆积图*/
        function initallEsTableOfLine() {
            $("#highchartContainerOfTTLine").highcharts({
                credits: {//去水印
                    text: '',
                    href: ''
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: '服务量走势图'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: 'black',
                            style: {
                                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                                textOutline: '1px 1px black'
                            }
                        }
                    }
                },
                series: getEsLineCharData()
            });
        }

        /*导出报告*/
        function exportReport(tab) {
            if (tab == 1) {
                method5('ttTable1', "院线服务情况报表.xls");
            } else if (tab == 2) {
                method5('ttTable2', "院线服务状态表.xls");
            }
        }
    </script>
</head>
<body style="padding: 0px;margin: 0px auto;overflow:scroll;">
<div class="easyui-tabs" id="tabs" style="overflow:hidden;">
    <div title="院线服务量" style="overflow: hidden;">
        <div class="pad_l_10">
            <br/>
            <table width="98%">
                <tr>
                    <td style="width: 180px;">
                        <label class="report_label">年度</label>
                        <select id="year_1" style="width:85px;">
                            <c:forEach items="${years }" var="item">
                                <option value="${item }">${item }&nbsp;年</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td>
                        <label class="report_label">BP</label>
                        <input id="departId_1" type="hidden">
                        <input id="departname_1" style="width: 200px;"/>
                        <t:choose hiddenName="departId_1" hiddenid="id" inputTextname="departname_1"
                                  textname="bpCode" title="机构列表"
                                  url="zyInspectionReportController.do?goChooseOrgsForIrReport"
                                  name="orgList" width="660px" height="550px"
                                  icon="icon-search" isclear="true"></t:choose>
                    </td>
                    <td>
                        <label class="report_label">院线</label>
                        <input id="intheaterId_1" type="hidden">
                        <input id="intheatername_1" class="inputxt" style="width: 120px;"/>
                        <t:choose hiddenName="intheaterId_1" hiddenid="id" inputTextname="intheatername_1"
                                  url="zyIntheaterController.do?zyintheatersCheckboxList"
                                  name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                                  isclear="true" height="300px" width="400px"/>
                    </td>
                    <td>
                        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                           onclick="searchReport(1)">查询</a>
                    </td>
                </tr>
            </table>
            <div style="text-align:right; padding-right:10px;">
                <a id="dlink" style="display:none;"></a>
                <a href="javascript:void(0);" class="easyui-linkbutton"
                   data-options="iconCls:'icon-putout',plain:'true'" onclick="exportReport(1)">导出报告</a>
            </div>
            <div id="highchartContainerOfTTLine"
                 style="width: 99%;height:310px;margin: auto; display: inline-block;border: 1px solid #000000"></div>
            <br/>
            <br/>

            <hr/>
            <table id="ttTable1" class="report_table">
                <thead>
                <th class="r0_c0">服务量</th>
                <th class="r0_c1">Jan</th>
                <th class="r0_c2">Feb</th>
                <th class="r0_c3">Mar</th>
                <th class="r0_c4">Apr</th>
                <th class="r0_c5">May</th>
                <th class="r0_c6">Jun</th>
                <th class="r0_c7">Jul</th>
                <th class="r0_c8">Aug</th>
                <th class="r0_c9">Sep</th>
                <th class="r0_c10">Oct</th>
                <th class="r0_c11">Nov</th>
                <th class="r0_c12">Dec</th>
                </thead>
                <tbody id="ttbody">

                </tbody>
            </table>
            <br/>
        </div>
    </div>
    <div title="院线服务状态" style="overflow-y: hidden;">
        <div class="pad_l_10">
            <br/>
            <table width="98%">
                <tr>
                    <%--<td>--%>
                    <%--<label class="report_label">年度</label>--%>
                    <%--<select id="year_2" style="width:85px;">--%>
                    <%--<c:forEach items="${years }" var="item">--%>
                    <%--<option value="${item }">${item }&nbsp;年</option>--%>
                    <%--</c:forEach>--%>
                    <%--</select>--%>
                    <%--</td>--%>
                    <td>
                        <label class="report_label">BP</label>
                        <input id="departId_2" type="hidden">
                        <input id="departname_2" style="width: 250px;"/>
                        <t:choose hiddenName="departId_2" hiddenid="id" inputTextname="departname_2"
                                  textname="bpCode" title="机构列表"
                                  url="zyInspectionReportController.do?goChooseOrgsForIrReport"
                                  name="orgList" width="660px" height="550px"
                                  icon="icon-search" isclear="true"></t:choose>
                    </td>
                    <td>
                        <label class="report_label">院线</label>
                        <input id="intheaterId_2" type="hidden">
                        <input id="intheatername_2" class="inputxt" style="width: 120px;"/>
                        <t:choose hiddenName="intheaterId_2" hiddenid="id" inputTextname="intheatername_2"
                                  url="zyIntheaterController.do?zyintheatersCheckboxList"
                                  name="intheaterList" icon="icon-search" title="院线列表" textname="typename"
                                  isclear="true" height="300px" width="400px"/>
                    </td>
                    <td>
                        <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                           onclick="searchReport(2)">查询</a>
                    </td>
                </tr>
            </table>
            <div style="text-align:right; padding-right:10px;">
                <a href="javascript:void(0);" class="easyui-linkbutton"
                   data-options="iconCls:'icon-putout',plain:'true'" onclick="exportReport(2)">导出报告</a>
            </div>
            <hr/>
            <div id="highchartContainerOfEsLine"
                 style="width: 98%;height:310px;margin: auto; display: inline-block;border: 1px solid #000000"></div>
            <br/><br/>
            <table id="ttTable2" class="report_table">
                <thead>
                <th><span>正常放映数量</span></th>
                <th><span>故障待处理数量</span></th>
                <th><span>备件在途数量</span></th>
                <th><span>现场处理中数量</span></th>
                </thead>
                <tbody id="ttbody1">

                </tbody>
            </table>
            <br/>
            <br/>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
	function getStatusTableDataBeforeDeal(intheatername, bp){
	    var defer = $.Deferred();
        $.ajax({
            url: "cbsServiceController.do?getStatusTableData",
            data: {
                "intheatername": intheatername,
                "bp": bp
            },
            cache: false,
            dataType: 'json',
            type: 'POST',
            success: function (data) {
                defer.resolve(data);
            }
        });
        return defer.promise();
	}

    /*院线服务状态 table表格*/
	function dealStatusTableData(intheatername, bp) {
	    lockmask(true,"处理中...","self");
        $.when(getStatusTableDataBeforeDeal(intheatername, bp)).done(function(data){
            lockmask(false,undefined,"self");
            if (data.success) {
                clearStatusTableData(); //每次初始化表格时清空临时储存的highchart数据
                /*----------------表格-------------------*/
                var obj = data.obj;

                /*故障待处理数量*/
                var gn = obj.gnum;
                /*备件在途数量*/
                var bn = obj.bnum;
                /*正常放映数*/
                var zn = obj.znums;
                /*现场处理中数量*/
                var xn = obj.xnum;

                var html = "";
                html += "<tr>";

                html += "<td>" + zn + "</td>";
                setclearStatusTableData("正常放映数", zn);
                html += "<td>" + gn + "</td>";
                setclearStatusTableData("故障待处理数量", gn);
                html += "<td>" + bn + "</td>";
                setclearStatusTableData("备件在途数量", bn);
                html += "<td>" + xn + "</td>";
                setclearStatusTableData("现场处理中数量", xn);
                html += "</tr>";


                $("#ttbody1").html(html);
                /*------------------end 表格------------------*/
                initallEsHighChartsOfLine();
            } else {
                tip(data.msg);
            }
        }).fail(function () {
            lockmask(false,undefined,"self");
            $.dialog.alert("获取数据失败！");
        })
	}

    /*院线服务状态 table表格*/
    // function getStatusTableData(intheatername, bp) {
    //     $.ajax({
    //         url: "cbsServiceController.do?getStatusTableData",
    //         data: {
    //             "intheatername": intheatername,
    //             "bp": bp
    //         },
    //         cache: false,
    //         async: false,//必须是同步进行，为了获取 初始化 highcharts 数据
    //         dataType: 'json',
    //         type: 'POST',
    //         success: function (data) {
    //             if (data.success) {
    //                 clearStatusTableData(); //每次初始化表格时清空临时储存的highchart数据
    //                 /*----------------表格-------------------*/
    //                 var obj = data.obj;
    //
    //                 /*故障待处理数量*/
    //                 var gn = obj.gnum;
    //                 /*备件在途数量*/
    //                 var bn = obj.bnum;
    //                 /*正常放映数*/
    //                 var zn = obj.znums;
    //                 /*现场处理中数量*/
    //                 var xn = obj.xnum;
    //
    //                 var html = "";
    //                 html += "<tr>";
    //
    //                 html += "<td>" + zn + "</td>";
    //                 setclearStatusTableData("正常放映数", zn);
    //                 html += "<td>" + gn + "</td>";
    //                 setclearStatusTableData("故障待处理数量", gn);
    //                 html += "<td>" + bn + "</td>";
    //                 setclearStatusTableData("备件在途数量", bn);
    //                 html += "<td>" + xn + "</td>";
    //                 setclearStatusTableData("现场处理中数量", xn);
    //                 html += "</tr>";
    //
    //
    //                 $("#ttbody1").html(html);
    //                 /*------------------end 表格------------------*/
    //             } else {
    //                 tip(data.msg);
    //             }
    //         }
    //     });
    // }

    var serviceLineData = [];

    function setclearStatusTableData(name, data) {
        var dt = {};
        dt.name = name;
        dt.data = [data];
        if(name == "正常放映数"){
            dt.visible = false;
        }
        serviceLineData.push(dt);
    }

    function clearStatusTableData() {
        serviceLineData = [];
    }

    function getclearStatusTableData() {
        return serviceLineData;
    }

    /*柱状堆积图*/
    function initallEsHighChartsOfLine() {
        $("#highchartContainerOfEsLine").highcharts({
            credits: {//去水印
                text: '',
                href: ''
            },
            chart: {
                type: 'bar'
            },
            title: {
                text: '院线服务条形图'
            },
            xAxis: {
                categories: ['']
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            end: {
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            tooltip:{
                formatter: function(){
                    var html = '<span>'+this.series.name+'：'+this.y+'</span>';
                    return html;
                }
            },
            series: getclearStatusTableData()
        });
    }

</script>
